.icon-close {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(./images/关闭.png) no-repeat center center / contain;
}

.ant-drawer-close {
    margin-right: 15px;
    padding: 15px 0 15px 15px !important;
}

.drawer-container {
    // height: 100%;
    // bottom: 0;
    // margin-top: 64px;
    // .ant-drawer-content-wrapper {
    // position: absolute;
    // padding: 0;
    // width: 1000px;
    // height: 100%;
    // min-height: 580px;
    // word-wrap: normal;
    // .ant-drawer-body {
    //     padding: 0;
    // }
    .ant-modal-body {
        padding: 0 !important;
    }
    .drawer-top {
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #c3ddf1;
        font-weight: bold;
        color: rgb(51, 51, 51);
        padding-left: 44px;
        text-align: left;
        background: url(./images/弹出层_图标_新建.png) no-repeat 22px center / 16px 16px;
    }
    .drawer-body {
        height: 592px;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        li {
            user-select: none;
        }
        .drawer-body-left {
            float: left;
            width: 65%;
            height: 100%;
            position: relative;
            border-right: 1px solid #c3ddf1;
            .search-user-result {
                width: 350px;
                max-height: 250px;
                position: absolute;
                top: 60px;
                left: 50px;
                z-index: 10;
                list-style: none;
                padding: 0;
                margin: 0;
                background-color: white;
                box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
                border-radius: 3px;
                li {
                    height: 42px;
                    line-height: 42px;
                    padding: 0 10px;
                    cursor: pointer;
                    border-bottom: 1px solid #ebebeb;
                    background-color: white;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    color: #333333;
                    white-space: nowrap;
                    &.disable {
                        color: #999;
                        cursor: not-allowed;
                    }
                    &:hover {
                        background-color: #cccccc4f;
                    }
                    img {
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                }
            }
            .selected-user {
                height: calc(100% - 74px);
                padding: 20px 10px 30px 30px;
                &:after {
                    content: '';
                    display: block;
                    clear: both;
                }
                .user-one {
                    float: left;
                    padding: 0 32px 0 8px;
                    max-width: 200px;
                    position: relative;
                    height: 30px;
                    line-height: 28px;
                    border-radius: 3px;
                    border: dashed 1px #dddddd;
                    margin: 0 8px 8px 0;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    .user-one-cancel {
                        position: absolute;
                        top: 9px;
                        right: 8px;
                        width: 12px;
                        height: 12px;
                        cursor: pointer;
                        background-image: url(./images/搜索清除_初始.png);
                        &:hover {
                            background-image: url(./images/搜索清除_悬停.png);
                        }
                    }
                }
                #search-user-input {
                    float: left;
                    height: 30px;
                    line-height: 30px;
                    border: 0;
                    outline: 0;
                    margin-left: 8px;
                }
            }
            .line {
                width: 100%;
                height: 1px;
                // background-color: #c3ddf1;
                background-color: #fff;
            }
            .group-name {
                display: inline-block;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                // margin-bottom: 24px;
                height: 50px;
                .name-input {
                    width: 265px;
                    height: 30px;
                    line-height: 30px;
                    outline: 0;
                    margin-left: 10px;
                    border-radius: 3px;
                    padding: 0 8px;
                    border: 1px solid #bac7d9;
                    &:hover,
                    &:focus {
                        border: 1px solid #5897ed;
                    }
                }
            }
            .group-setting {
                height: 72px;
                line-height: 72px;
                background-color: #eef5fb;
                .group-btn {
                    display: inline-block;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 16px;
                    .confirm-btn {
                        display: inline-block;
                        background-image: linear-gradient(-90deg, #008aff 0%, #40cbff 100%);
                        color: white;
                        height: 32px;
                        line-height: 32px;
                        padding: 0 15px;
                        cursor: pointer;
                        text-align: center;
                        border-radius: 3px;
                        margin-right: 10px;
                        &:hover {
                            opacity: 0.75;
                        }
                    }
                    .cancel-btn {
                        display: inline-block;
                        color: white;
                        height: 32px;
                        line-height: 32px;
                        padding: 0 15px;
                        text-align: center;
                        cursor: pointer;
                        background-image: linear-gradient(90deg, #ff593e 0%, #ff4037 100%);
                        border-radius: 3px;
                        &:hover {
                            opacity: 0.75;
                        }
                    }
                }
            }
        }
        .drawer-body-right {
            float: left;
            width: 35%;
            height: 100%;
            .contact-list {
                list-style: none;
                padding: 0;
                margin: 0;
                li {
                    position: relative;
                    // height: 48px;
                    line-height: 48px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    border-bottom: 1px solid #ebebeb;
                    cursor: pointer;
                    .contactlogo {
                        display: inline-block;
                        width: 17px;
                        height: 14px;
                        vertical-align: middle;
                        margin: 0 10px 0 15px;
                    }
                    .all {
                        background-image: url(./images/通讯录全校师生.png);
                    }
                    .class {
                        background-image: url(./images/通讯录我的班级.png);
                    }
                    .group {
                        background-image: url(./images/通讯录我的教师组.png);
                    }
                    .lastly {
                        background-image: url(./images/通讯录最近联系人.png);
                    }
                    .frequently {
                        background-image: url(./images/通讯录常用联系人.png);
                    }
                    .chatGroup {
                        background-image: url(./images/通讯录讨论组.png);
                    }
                    .parent {
                        background-image: url(./images/通讯录学生家长.png);
                    }
                    .admin {
                        background-image: url(./images/学校管理员.png);
                    }
                    .organization {
                        background-image: url(./images/组织结构.png);
                    }
                    .downlogo {
                        position: absolute;
                        top: 21px;
                        right: 24px;
                        transition: all 0.3s;
                        width: 10px;
                        height: 10px;
                        background-image: url(./images/down.png);
                    }
                }
                .list-content-user,
                .list-content-group,
                .list-content {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    .history-router {
                        line-height: 24px;
                        font-size: 12px;
                        padding-left: 20px;
                        cursor: default;
                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                        .router-one {
                            float: left;
                            color: #999999;
                            span {
                                text-decoration: underline;
                                color: #0099ff;
                                margin: 0 3px;
                                cursor: pointer;
                                &:hover {
                                    opacity: 0.75;
                                }
                            }
                            &:last-of-type {
                                span {
                                    text-decoration: none;
                                    color: #999999;
                                    cursor: default;
                                    margin: 0 3px;
                                    &:hover {
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                    li {
                        height: 48px;
                        line-height: 48px;
                        border-bottom: 1px solid #ebebeb;
                        position: relative;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        &.second-menu {
                            margin-left: 42px;
                            border-bottom: 0;
                            &:first-of-type {
                                border-top: 1px solid #ebebeb;
                            }
                            .child-name {
                                position: absolute;
                                left: 0;
                            }
                        }
                        &.disable {
                            color: #999;
                            cursor: not-allowed;
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                        .user_header {
                            display: inline-block;
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                            background-size: 100% 100%;
                            margin-right: 5px;
                            position: relative;
                            top: 7px;
                        }
                        .child-name {
                            position: absolute;
                            left: 35px;
                        }
                        .checklogo {
                            display: inline-block;
                            // width: 12px;
                            // height: 12px;
                            width: 14px;
                            height: 14px;
                            margin: 0 10px 0 15px;
                            position: relative;
                            top: 2px;
                            background-image: url(./images/复选-默认.png);
                            // background-image: url(./images/check_btn.png);
                        }
                        .helflogo {
                            display: inline-block;
                            // width: 12px;
                            // height: 12px;
                            width: 14px;
                            height: 14px;
                            margin: 0 10px 0 15px;
                            position: relative;
                            top: 2px;
                            background-image: url(./images/复选-部分选中.png);
                            // background-position-y: 12px;
                        }
                        .checkedlogo {
                            display: inline-block;
                            // width: 12px;
                            // height: 12px;
                            width: 14px;
                            height: 14px;
                            margin: 0 10px 0 15px;
                            position: relative;
                            top: 2px;
                            background-image: url(./images/复选-单个选中.png);
                            // background-image: url(./images/check_btn.png);
                            // background-position-y: 50px;
                        }
                        .next-floor {
                            position: absolute;
                            top: 0;
                            right: 26px;
                            color: #999999;
                            &:hover {
                                color: #719fc3;
                                .leftlogo {
                                    background-image: url(./images/next-hover.png);
                                }
                            }
                            .leftlogo {
                                width: 17px;
                                height: 14px;
                                display: inline-block;
                                background-image: url(./images/next.png);
                                position: relative;
                                top: 2px;
                                right: 3px;
                            }
                            &:before {
                                content: '';
                                display: inline-block;
                                width: 1px;
                                height: 16px;
                                background-color: #cccccc;
                                margin-right: 15px;
                                position: relative;
                                top: 4px;
                            }
                        }
                    }
                }
            }
        }
    }
    // }
}